<template>
  <div>
    <el-form style="width: 400px;" ref="loginForm" :model="loginForm" label-width="90px" class="login-box" :rules="rules">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="uName">
        <el-input type="text" v-model="loginForm.uName" />
      </el-form-item>
      <el-form-item label="密码" prop="uPwd">
        <el-input type="password"  v-model="loginForm.uPwd"/>
      </el-form-item>
      <el-form-item>
        <el-space wrap :size="40">
          <el-row :gutter="0" style="margin-left: 80px">
            <el-button id="1" type="primary" v-on:click="classify()">登录</el-button>
          </el-row>
        </el-space>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {ElMessage} from 'element-plus'
import request from "@/util/request"
import {useRoute} from 'vue-router'
import router from "@/router";
import { useRouter } from "vue-router";
export default {

  setup() {
    const route = useRoute()
    return {route}
  },
  name: 'Test',
  data() {
    return {
      u: '',
      qid:'',
      radioValue: '',
      loginBg: 'url(' + require('../assets/img1.png') + ')',
      loginForm: {
        uName: '',
        uPwd: ''
      },
      rules:{
        uName : [
          {required:true, message:'请输入账号',trigger:'blur'}
        ],
        uPwd : [
          {required:true, message:'请输入密码',trigger:'blur'}
        ]
      }
    }
  },
  methods: {
    getQid() {
      var url = decodeURI(window.location.search); //?id="123456"&name="www";
      var object = {};
      if (url.indexOf("?") != -1)//url中存在问号，也就说有参数。
      {
        var str = url.substr(1);  //得到?后面的字符串
        var strs = str.split("&");  //将得到的参数分隔成数组[id="123456",name="www"];
        for (var i = 0; i < strs.length; i++) {
          object[strs[i].split("=")[0]] = strs[i].split("=")[1];//得到{id:'123456',name:'www'}
        }
      }
      this.qid=object['qid']
      return object['qid']
    },
    classify(e) {
      document.getElementById("1").blur();

      let name = this.loginForm.uName
      let psw = this.loginForm.uPwd
      let qid = this.getQid()
      let formData = new FormData();
      formData.append("answerName",name);
      formData.append("password",psw);
      formData.append("qid",qid);
      console.log(qid)
      this.$axios.post("http://localhost:8090/answer/answerLogin/",formData).then(res=>res.data).then(res=>{
        if(res.code == '200'){
          console.log(res.data)
          ElMessage({
            showClose: true,
            message: '登录成功',
            type: 'success'
          })
          router.push({
            //传递参数使用params的话，只能使用name指定(在route.js里面声明name)
            path:'/answerView',
            query:{
              qid:qid,
              aid:res.data.aid
            }
          })
        }else {
          ElMessage.error(res.message)
        }
      })
    },
    onSubmit() {

    },
    onRegis() {

    }
  },
  mounted() {
    document.body.style.backgroundSize = '100%'
    let img=[
      'url(' + require('../assets/img2.png') + ')',
      'url(' + require('../assets/img1.png') + ')',
      'url(' + require('../assets/img3.png') + ')',
      'url(' + require('../assets/img4.png') + ')',
      'url(' + require('../assets/img5.png') + ')',
      'url(' + require('../assets/img6.png') + ')',
    ];
    let showimg = img[Math.floor(Math.random()*6)]
    document.body.style.backgroundImage = showimg
  },
  beforeUnmount() {
    document.body.style.backgroundImage = ''
  }
}
</script>

<style scoped>
.login-box {
  border: 1px solid #DCDFE6;
  width: 350px;
  margin: 120px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  box-shadow: 0px 0 25px black;
  background-color: white;
}

.view {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
}

.login-title {
  text-align: center;
  margin: 0 auto 30px auto;
  color: #303133;
}

/deep/ .el-form-item__label {
  font-size: 18px;
  color: black;
}
</style>

